<template>
  <div class="m-contain edit edit-mine-coin">
    <van-nav-bar title="我的金币"
                 left-arrow
                 @click-left="onClickLeft" />
    <div class="m-main">
      <div>
        <div class="jinbibox">
          <div>
            <img :src="require('@/assets/image/person/litlejinbi.png')"
                 alt=""
                 class="middle"
                 style="width:18px"> <span class="middle"
                  style="font-size:13px">我的金币</span>
          </div>
          <div class="num">
            <div>
              <p class="font34">120</p>
              <p class="font13">主金币</p>
            </div>
            <div>
              <p class="font34">120</p>
              <p class="font13">子金币</p>
            </div>
          </div>
          <img :src="require('@/assets/image/person/jinbi.png')"
               alt=""
               class="jinbi">
        </div>
        <div style="display: flex;
    margin: 16px 0 10px 15px;
    font-size: 15px;">
          <p :class="type==1?'red':''"
             @click="type=1">主金币明细</p>
          <p :class="type==2?'red':''"
             @click="type=2"
             style="margin-left:24px">子金币明细</p>
        </div>
      </div>

      <div class="list">
        <van-cell-group title="">
          <van-cell center
                    title="每日发放"
                    label="2020-10-02 12:00:00">
            <template #default>
              +1
              <img :src="require('@/assets/image/person/litlejinbi.png')"
                   style="vertical-align:-2px;"
                   width="18">
            </template>
          </van-cell>
          <van-cell center
                    title="每日发放"
                    label="2020-10-02 12:00:00">
            <template #default>
              +1
              <img :src="require('@/assets/image/person/litlejinbi.png')"
                   style="vertical-align:-2px;"
                   width="18">
            </template>
          </van-cell>
        </van-cell-group>
      </div>

    </div>
  </div>
</template>
<script>

import Vue from 'vue';

import { NavBar, Field, Cell, CellGroup } from 'vant';

Vue.use(Field);
Vue.use(NavBar);
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  name: "userInfo",
  data() {
    return {
      value: '',
      type: 1
    }
  },
  components: {

  },
  methods: {
    onClickLeft() {
      this.$router.push('/mine')
    }
  }
}
</script>

<style scoped>
.edit-mine-coin .van-image__img {
  margin-top: 10px;
}
.edit-mine-coin .van-cell__label {
  color: #333333;
}
.edit-mine-coin .van-cell__title span {
  font-size: 15px;
  color: #333333;
}
.edit-mine-coin .van-cell__value {
  color: #e62b59;
  font-size: 17px;
  font-weight: 700;
}
</style>

<style lang="less" scoped>
.edit {
  min-height: 100vh;
  width: 100%;
  background-color: #fff;
  .van-cell {
    height: 63px;
  }
}
.jinbibox {
  width: 345px;
  height: 135px;
  background-color: #e62b4b;
  border-radius: 6px;
  margin: 0 auto;
  margin-top: 20px;
  position: relative;
  color: #fff;
  padding: 16px;
  .jinbi {
    width: 50px;
    position: absolute;
    right: 8px;
    bottom: 8px;
  }
  .middle {
    vertical-align: middle;
  }
  .num {
    display: flex;
    justify-content: space-evenly;
    text-align: center;
    margin-top: 14px;
  }
  .font34 {
    font-size: 34px;
  }
  .font13 {
    font-size: 13px;
  }
}
.red {
  color: #d32346;
}
</style>